<template>
  <div style="padding:0 37px 0 44px">
    <div class="breadcrumb-father">
      <div class="new-breadcrumb">
        <router-link  :to="{path:'/welcome'}">
          <img src="../../../assets/imgs/Home.png" alt="">
        </router-link>
        <router-link :to="{path:'/merchant'}">
          <span>{{$t('button.Merchant')}}</span>
        </router-link>

        <router-link :to="{path: '/handleMer',query:{ id:$route.query.id,states:'2',name:$route.query.name,merState:$route.query.merState }}">
          <span class="arrow">></span>
          <span>{{$route.query.name}}</span>
        </router-link>

        <span class="arrow">></span>
        <a href="javascript:void(-1)" @click="returnToShopList">
          <span>
            {{$t('button.Shops2')}}
          </span>
        </a>

        <span v-if="shopLayer == 1">
          <span class="arrow">></span>
          <span>{{breadcrumb_shopName}}</span>
        </span>
        <span v-else-if="shopLayer == 2">
          <span class="arrow">></span>
          <span>{{$t('modifyShop.New')}}</span>
        </span>

      </div>
    </div>
    <!-- 店铺列表 -->
    <ul class="shopListUl" v-show=showShopList>
      <li v-for="(item,index) in shopListData" :key=index class="shopListLi">
        <div class="shopImg">
          <div class="maskBox" v-show="showMerAduitInfo">
            <span>{{merAuditInfo}}</span>
          </div>
          <div class="maskBox" v-show="item.state===1&&item.remarks==='0'&&!showMerAduitInfo">
            <span>{{$t('modifyShop.ApprovalPending')}}</span>
          </div>
          <div class="maskBox" v-show="item.state===3&&item.remarks==='0'&&!showMerAduitInfo">
            <span>{{$t('modifyShop.Rejected')}}</span>
          </div>
          <div class="maskBox" v-show="item.state===0&&!showMerAduitInfo">
            <span>{{item.state===0? $t('modifyShop.Suspended') :''}}</span>
          </div>
          <img class="shopImgDel" :src="item.storePhotosUrl || item.storePhotosUrl1 || item.storePhotosUrl2 || item.storePhotosUrl3 || item.storePhotosUrl4" alt="">
        </div>
        <div class="shopInfo">
          <h3>
            <span :title="item.shopName"> {{item.shopName}} </span>
            <img v-show="item.state===1&&item.remarks=='1'" src="./../../../assets/imgs/shop_clack.png" :title="$t('modifyShop.AmendmentApprovalPending')">
          </h3>
          <div class="shopAddress">
            <i><img src="./../../../assets/imgs/shopAddress.png" alt=""></i>
            <span :title="item.address"> {{item.address}} </span>
          </div>
          <div class="shopContacts">
            <i><img src="./../../../assets/imgs/shopContacts.png" alt=""></i>
            <span :title="item.shopContact"> {{item.shopContact}} </span>
          </div>
          <div class="shopPhone">
            <span class="phone">
              <i><img src="./../../../assets/imgs/shopPhone.png" alt=""></i>
              <span :title="item.phone"> {{item.phone}} </span>
            </span>
            <a class="getInfoShop" href="javascript:void(0)" @click="getShop(item,index)">{{$t('modifyShop.ShopDetail')}}>></a>
          </div>
        </div>
      </li>
      <li class="newShop" style="background:#f6f6f6;" v-if="userType!=='9' && userType !== '11' && userType !== '5' && userType !== '10' " >
        <div @click="toggleAddShop()">
          <img src="./../../../assets/imgs/elUpload.png" alt="">
        </div>
        <span>{{$t('modifyShop.New')}}</span>
      </li>
    </ul>
    <!-- 店铺详情 -->
    <div class="shopDel" v-show="showShopDel">
      <div class="swiper">
        <!-- 走马灯 -->
        <el-carousel trigger="click" :autoplay=false v-show="modifyShop">
          <el-carousel-item v-for="(item,index) in shopImgList" :key=index class="carousel_item">
            <img :src="item.src" alt="">
          </el-carousel-item>
        </el-carousel>
        <!-- 上传图片logo -->
        <div v-show="!modifyShop" class="toggleUpload">
          <img :src="modiFyShopFirstImg" alt="">
          <i @click="toggleUploadImg" v-show="!showUploadList"><img src="./../../../assets/imgs/shopUpload.png" alt=""></i>
        </div>
      </div>
      <!-- 店铺详情 -->
      <div class="shopDelInfo" v-show="!showUploadList">
        <a v-show="modifyShop" v-if=" userType!=='9' && userType !== '11' && userType !== '5' && userType !== '10' && showShopHandle " :style="{ color:shopDelData.state===1? '#666666':'#4964CF' }" class="modifyBtn" href="javascript:void(0)" @click="shopDelData.state!==1?modifyInfo():function(){return false}">
          <i v-show="shopDelData.state===1"><img src="./../../../assets/imgs/shopModify2.png" alt=""></i>
          <i v-show="shopDelData.state!==1"><img src="./../../../assets/imgs/shopModify1.png" alt=""></i>
          {{$t('modifyShop.Edit')}}
        </a>
        <div v-show="!modifyShop" class="commitModify">
          <a href="javascript:void(0)" @click="cancelModify()">{{$t('button.Cancel')}}</a>
          <a href="javascript:void(0)" @click="commitModifyShop(1)" >{{$t('modifyShop.OK1')}}</a>
        </div>
        <!-- <h3>{{shopDelData.shopName}}</h3> -->
        <div class="shopName show-div" v-text="shopDelData.shopName" :title="shopDelData.shopName" v-show="modifyShop"></div>
        <input class="shopName" type="text" id="shopName" v-model="shopDelData.shopName" autocomplete="off" maxlength="100" @blur='checkModifyShopName' :disabled='modifyShop' :title="shopDelData.shopName" v-show="!modifyShop">
        <!-- 店铺详情具体数据 -->
        <ul :class="['shopDelUl',shopClassObject]">
          <li class="firstLi">
            <svg aria-hidden="true" class="svg-icon shop-svg">
              <use xlink:href="#icon-dizhi"></use>
            </svg>
            <span>{{$t('agent.Address')}}</span>
            <div class="show-div" v-text="shopDelData.address" :title="shopDelData.address" v-show="modifyShop"></div>
            <input type="text" v-model.lazy.trim="shopDelData.address" id="address" autocomplete="off" :title="shopDelData.address" :disabled='modifyShop' maxlength="200" v-show="!modifyShop">
          </li>
          <li class="twoLi">
            <svg aria-hidden="true" class="svg-icon shop-svg">
              <use xlink:href="#icon-lianxiren"></use>
            </svg>
            <span>{{$t('mer.Contractperson1')}}</span>
            <div class="show-div" v-text="shopDelData.shopContact" :title="shopDelData.shopContact" v-show="modifyShop"></div>
            <input type="text" v-model.lazy.trim="shopDelData.shopContact" :title="shopDelData.shopContact" autocomplete="off" id="shopContact" :disabled='modifyShop' maxlength="50" v-show="!modifyShop">
          </li>
          <li class="threeLi">
            <svg aria-hidden="true" class="svg-icon shop-svg">
              <use xlink:href="#icon-dianhua"></use>
            </svg>
            <span>{{$t('mec.PhoneNo1')}}</span>
            <div class="show-div" v-text="shopDelData.phone" :title="shopDelData.phone" v-show="modifyShop"></div>
            <input type="text" v-model.lazy.trim="shopDelData.phone" :title="shopDelData.phone" autocomplete="off" id="phone" :disabled='modifyShop' maxlength="20" oninput="this.value=this.value.replace(/[^\d\-]/g,'')" v-show="!modifyShop">
          </li>
          <li class="fourLi">
            <svg aria-hidden="true" class="svg-icon shop-svg">
              <use xlink:href="#icon-youxiang"></use>
            </svg>
            <span>{{$t('mec.Email')}}</span>
            <div class="show-div" v-text="shopDelData.email" :title="shopDelData.email" v-show="modifyShop"></div>
            <input type="text" v-model.lazy.trim="shopDelData.email" :title="shopDelData.email" autocomplete="off" id="email" @blur="valiEmail(1)" :disabled='modifyShop' maxlength="100" v-show="!modifyShop">
          </li>
          <!-- <li class="fiveLi">
            <i><img src="./../../../assets/imgs/shopIndustry.png" alt=""></i>
            <span>{{$t('mer.Sector')}}</span>
            <input type="text" v-model="shopDelData.shopIndustry" v-show="modifyShop"  disabled='disabled'>
            <el-select v-model="shopDelData.shopIndustry" value-key="id" placeholder="" v-show="!modifyShop" clearable>
              <el-option v-for="item in optionsI" :key="item.id" :label="item.industryName" :value="item.industryName"></el-option>
            </el-select>
          </li> -->
          <li class="fiveLi" v-if="companyId==='2'">
            <svg aria-hidden="true" class="svg-icon shop-svg">
              <use xlink:href="#icon-hangye"></use>
            </svg>
            <span>{{$t('AuMer.State')}}</span>
            <!-- <input type="text" v-model.lazy="shopDelData.continent"  disabled='disabled'> -->
            <el-select v-model="shopDelData.continent" v-if="shopDelData.state==3?false:true" id='continent' value-key="id" disabled="disabled" clearable>
              <el-option v-for="item in AU_State_list" :key="item.areaCode" :label="item.areaName" :value="item.areaCode"></el-option>
            </el-select>
            <el-select v-model="shopDelData.continent" v-else id='continent' value-key="id" :disabled="modifyShop" clearable>
              <el-option v-for="item in AU_State_list" :key="item.areaCode" :label="item.areaName" :value="item.areaCode"></el-option>
            </el-select>
          </li>
          <li class="lastLi">
            <svg aria-hidden="true" class="svg-icon shop-svg">
              <use xlink:href="#icon-idcad"></use>
            </svg>
            <span>{{$t('modifyShop.ShopNumber')}}</span>
            <input type="text" v-model="shopDelData.shopId" disabled='disabled'>
          </li>
        </ul>
        <!-- 修改资料对话框 -->
        <div class="shopMsgBox" id="shopMsg">
          <div class="shopMsgLayer"></div>
          <div class="shopMsgInfo">
            <div class="shopMsgInfo_header">{{$t('other.InformationChange')}}</div>
            <div class="shopMsgInfo_msg">{{$t('other.ConfirmToMakeTheChanges')}}</div>
            <div class="shopMsgInfo_footer">
              <button class="shopMsgInfo_footer_cancel" @click="cancelMsgBox">{{$t('search.NO')}}</button>
              <button class="shopMsgInfo_footer_ok" @click="commitShopData(1)">{{$t('search.YES')}}</button>
            </div>
          </div>
        </div>
        <!-- 删除店铺对话框 -->
        <div class="shopMsgBox" id="shopDel">
          <div class="shopMsgLayer"></div>
          <div class="shopMsgInfo">
            <div class="shopMsgInfo_header">{{$t('button.delete')}}</div>
            <div class="shopMsgInfo_msg">{{$t('other.ConfirmToDeleteTheShop')}}</div>
            <div class="shopMsgInfo_footer">
              <button class="shopMsgInfo_footer_cancel" @click="cancelDelBox">{{$t('search.NO')}}</button>
              <button class="shopMsgInfo_footer_ok" @click="delShop()">{{$t('search.YES')}}</button>
            </div>
          </div>
        </div>
      </div>
      <!-- 上传图片 -->
      <div class="uploadImgList" v-show='showUploadList'>
        <div class="upload_complete">
          <a href="javascript:void(0)" @click="showUploadList=!showUploadList">{{$t('modifyShop.OK')}}</a>
        </div>
        <ul id="uploadShopImgUl">
          <li v-if='shopDelData.storePhotosUrl' id="storePhotosUrl">
            <img :src="shopDelData.storePhotosUrl" alt="" />
            <i class="delShopImg" @click="delImg('storePhotosUrl')">
              <img src="./../../../assets/imgs/shopDel.png" alt="">
            </i>
          </li>
          <li v-if='shopDelData.storePhotosUrl1' id="storePhotosUrl1">
            <img :src="shopDelData.storePhotosUrl1" alt="" />
            <i class="delShopImg" @click="delImg('storePhotosUrl1')">
              <img src="./../../../assets/imgs/shopDel.png" alt="">
            </i>
          </li>
          <li v-if='shopDelData.storePhotosUrl2' id="storePhotosUrl2">
            <img :src="shopDelData.storePhotosUrl2" alt="" />
            <i class="delShopImg" @click="delImg('storePhotosUrl2')">
              <img src="./../../../assets/imgs/shopDel.png" alt="">
            </i>
          </li>
          <li v-if='shopDelData.storePhotosUrl3' id="storePhotosUrl3">
            <img :src="shopDelData.storePhotosUrl3" alt="" />
            <i class="delShopImg" @click="delImg('storePhotosUrl3')">
              <img src="./../../../assets/imgs/shopDel.png" alt="">
            </i>
          </li>
          <li v-if='shopDelData.storePhotosUrl4' id="storePhotosUrl4">
            <img :src="shopDelData.storePhotosUrl4" alt="" />
            <i class="delShopImg" @click="delImg('storePhotosUrl4')">
              <img src="./../../../assets/imgs/shopDel.png" alt="">
            </i>
          </li>
          <li v-show='isShopFiveImg' id="modifyShopElImg">
            <el-upload id="modifyShopElupload" action="/api/share/picture/upload" :on-success="shopPhotosSuccess" :show-file-list="false" name="upfile" list-type="picture" :headers="headers">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <span class="uploadSpan">{{$t('modifyShop.UploadPhoto')}}</span>
          </li>
        </ul>
      </div>
      <!-- 删除店铺 -->
      <div class="shop_delete" v-show="$route.query.merState==='1'&&shopDelData.state===3&&userType!='5'&&userType!='9'&&userType!='11'" >
        <a class="deleteBtn" href="javascript:void(0)" @click="delShopBox">{{$t('modifyShop.delete')}}</a>
      </div>
      <!-- 切换店铺 -->
      <div class="ShopToggle" v-show="modifyShop">
        <a class="toggle_left" @click="tabToggle(-1)" href="javascript:void(0)"><img src="./../../../assets/imgs/shopLeft.png" alt=""></a> 
        <a class="toggle_right" @click="tabToggle(1)" href="javascript:void(0)"><img src="./../../../assets/imgs/shopRight.png" alt=""></a>
      </div>
    </div>
    <!-- 新增店铺 -->
    <div class="addShop" v-show="showAddShop">
      <!-- 上传图片logo -->      
      <div class="addShop_upload">
        <div class="addShop_toggleUpload" v-show='addShop_showImg'>
          <div class="addShop_imgBox" @click="toggleAddShopImgUpload"><img src="./../../../assets/imgs/shopUpload.png" alt=""></div>
          <span>{{$t('modifyShop.ClickToAddPhotos')}}</span>
        </div>
        <div id='addShop_firstImg' v-show='!addShop_showImg'>
          <img :src="upload_showImg" alt="">
          <i @click="addShop_eluploadImg=!addShop_eluploadImg"><img src="./../../../assets/imgs/shopUpload.png" alt=""></i>
        </div>
      </div>
      <!-- 新增店铺数据 -->
      <div class="addShop_form" v-show="!addShop_eluploadImg">
        <!-- 取消提交 -->
        <div class="commitAdd">
          <a href="javascript:void(0)" @click="cancelAdd()">{{$t('button.Cancel')}}</a>
          <a href="javascript:void(0)" @click="commitAddShop(0)">{{$t('button.New')}}</a>
        </div>
        <div class="addShop_shopName">
          <input type="text" id="shopNamePlace" :placeholder="this.$t('modifyShop.ShopName')" maxlength="100"  autocomplete="off"  v-model.lazy.trim="addShopData.shopName" @blur="checkShopName" @focus="emptyText()">
        </div>
        <!-- 新增店铺详细信息 -->
        <ul :class="['addShop_ul',shopClassObject]"> 
          <li class="firstLi">
            <svg aria-hidden="true" class="svg-icon shop-svg">
              <use xlink:href="#icon-dizhi"></use>
            </svg>
            <span>{{$t('agent.Address')}}</span>
            <input type="text" v-model.lazy.trim="addShopData.address" id="address" class="address-test" maxlength="200" autocomplete="off" >
          </li>
          <li class="twoLi">
            <svg aria-hidden="true" class="svg-icon shop-svg">
              <use xlink:href="#icon-lianxiren"></use>
            </svg>
            <span>{{$t('agent.Contact')}}</span>
            <input type="text" v-model.lazy.trim="addShopData.shopContact" id="shopContact" class="shopContact-test" maxlength="50" autocomplete="off" >
          </li>
          <li class="threeLi">
            <svg aria-hidden="true" class="svg-icon shop-svg">
              <use xlink:href="#icon-dianhua"></use>
            </svg>
            <span>{{$t('mec.PhoneNo1')}}</span>
            <input type="text" v-model.lazy.trim="addShopData.phone" id="phone" class="phone-test" maxlength="20" autocomplete="off" oninput="this.value=this.value.replace(/[^\d\-]/g,'')" />
          </li>
          <li class="fourLi">
            <svg aria-hidden="true" class="svg-icon shop-svg">
              <use xlink:href="#icon-youxiang"></use>
            </svg>
            <span>{{$t('mer.Email')}}</span>
            <input type="text" v-model.lazy.trim="addShopData.email" id="email" class="email-test" @blur="valiEmail(2)" maxlength="100" autocomplete="off" >
          </li>
          <li class="fiveLi" v-if="companyId==='2'">
            <svg aria-hidden="true" class="svg-icon shop-svg">
              <use xlink:href="#icon-hangye"></use>
            </svg>
            <span>{{$t('AuMer.State')}}</span>
            <el-select v-model="addShopData.continent"  id='continent' value-key="id" clearable>
              <el-option v-for="item in AU_State_list" :key="item.areaCode" :label="item.areaName" :value="item.areaCode"></el-option>
            </el-select>
          </li>
        </ul>
        <!-- 新增店铺对话框 -->
        <div class="shopMsgBox" id="shopAddMsg">
          <div class="shopMsgLayer"></div>
          <div class="shopMsgInfo">
            <div class="shopMsgInfo_header">{{$t('button.New')}}</div>
            <div class="shopMsgInfo_msg">{{$t('other.ConfirmToRegisterTheShop')}}</div>
            <div class="shopMsgInfo_footer">
              <button class="shopMsgInfo_footer_cancel" @click="cancelAddShop">{{$t('search.NO')}}</button>
              <button class="shopMsgInfo_footer_ok" @click="commitShopData(0)">{{$t('search.YES')}}</button>
            </div>
          </div>
        </div>
      </div>
      <!-- 新增店铺上传图片 -->
      <div class="addShop_imgUpload" v-show="addShop_eluploadImg">
        <div class="upload_complete">
          <a href="javascript:void(0)" @click="addShop_eluploadImg=!addShop_eluploadImg">{{$t('modifyShop.OK')}}</a>
        </div>
        <ul id="addShopImgList">
          <li class="addShop_lastLi" id="addShopImgList_lastLi" v-show='isFiveImg'>
            <el-upload id="addShopElupload" action="/api/share/picture/upload" :on-success="newShopPhotosSuccess" :before-upload="beforeImgUpload" :show-file-list="false" name="upfile" list-type="picture" :headers="headers">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <span class="uploadSpan">{{$t('modifyShop.UploadPhoto')}}</span>
          </li>
        </ul>
        
      </div>
    </div>
  </div>
</template>

<script>
import {
  addShopAjax,
  delShop,
  merchantShopTwo,
  reauditShop,
  checkShopName
} from "api/businessManagement/merchant/index";
import deleteImg from '@/assets/imgs/shopDel.png'

export default {
  name: "shop",
  // props: ["id", "states", "disId", "merState"],
  data() {
    return {
      headers: { "access-token": sessionStorage.getItem("access-token") },
      companyId: localStorage.getItem("companyId"),
      userType:localStorage.getItem('userType'),
      locale_state:localStorage.getItem("locale"),
      locale: localStorage.getItem("locale") === "en" ? "1" : "0",
      // optionsI: JSON.parse(localStorage.getItem("queryIndustryObj")),
      shopListData: [],
      showMerAduitInfo: this.$route.query.merState === "1" ? false : true,
      shopAuditInfo: "",
      merAuditInfo: "",
      showShopList: true,
      showShopDel: false,
      shopDelData: {},
      modifyShop: true,
      shopImgList: [],
      shopIndex: undefined,
      shopLayer: 0,
      extendShopData: {},
      showUploadList: false,
      isShopFiveImg: true,
      showAddShop: false,
      addShopData: {
        shopName: undefined,
        address: undefined,
        shopContact: undefined,
        phone: undefined,
        email: undefined,
        continent: undefined,
        storePhotosUrl: undefined,            
        storePhotosUrl1: undefined,           
        storePhotosUrl2: undefined,           
        storePhotosUrl3: undefined,           
        storePhotosUrl4: undefined       
      },
      addShop_eluploadImg: false,
      count: 0,
      counts: [ "storePhotosUrl", "storePhotosUrl1", "storePhotosUrl2", "storePhotosUrl3", "storePhotosUrl4"],    
      isFiveImg: true,   
      addShop_showImg:true,      
      upload_showImg:'',     
      requiredArr:[],
      AuShopRequiredArr:[ "shopName", "address", "shopContact", "email",'continent' ],
      HKShopRequiredArr:[ "shopName", "address", "shopContact", "phone" ],
      flag:false,
      modiFyShopFirstImg:undefined,
      AU_State_list:JSON.parse(localStorage.getItem("queryAU_State_list")),
      reaCode:null,
      prer_html:'',
      showShopHandle:true,
      breadcrumb_shopName:'',
      shopClassObject: {
        'shopDelUl-marginleft':false,
        'shopDelUl-margin':false,
      },
    };
  },
  created() {
    // console.log(this.userType!=='9');
    // console.log(this.userType!== '5');
    // console.log(this.showShopHandle);
    // console.log(this.userType!=='9' || this.userType !== '5' || this.showShopHandle);

    this.shopListAll(this.$route.query.id);
    if (this.$route.query.merState === "0") {
      this.merAuditInfo = this.$t('modifyShop.ApprovalPending');
    } else if (this.$route.query.merState === "2") {
      this.merAuditInfo = this.$t('modifyShop.Rejected');
    } else if (this.$route.query.merState === "3") {
      this.merAuditInfo = this.$t('modifyShop.Suspended');
    }
    $("#z_businessManagement .el-menu a li:first").addClass('is-active');

    if( this.userType === '2' ){
      this.showShopHandle = this.$route.query.parentId == localStorage.getItem('distributorId') ? true : false;
      if( localStorage.getItem("grade") == 0 ){
        this.showShopHandle = true;
      }
    }

    if(this.companyId === "2") {
      this.shopClassObject['shopDelUl-marginleft'] = true;
      this.shopClassObject['shopDelUl-margin'] = false;
    }else{
      this.shopClassObject['shopDelUl-marginleft'] = false;
      this.shopClassObject['shopDelUl-margin'] = true;
    }
    
  },
  beforeRouteLeave(to,from, next){
    if(to.path === '/merchant'){
      next();
    } else {
      // console.log($("#z_businessManagement .el-menu a li:first"));
      $("#z_businessManagement .el-menu a li:first").removeClass('is-active');
      localStorage.removeItem('searchMerchantData');
      next();
    }
  },
  updated(){
    $(".border_red").removeClass('border_red');
  },
  methods: {
    //返回到店铺列表页
    returnToShopList(){
      this.showShopList= true;
      this.showShopDel= false;
      this.modifyShop= true;
      this.showUploadList= false;
      this.isShopFiveImg= true;
      this.showAddShop= false;
      this.addShop_eluploadImg= false;
      this.isFiveImg= true;
      this.addShop_showImg=true;
      this.flag=false;
      this.shopLayer = 0;
    },
    // 验证邮箱
    valiEmail(index){
      // const reg = new RegExp("[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?"); 
      const reg = /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/;
      // 1 修改  2新增
      const obj = index === 1 ? this.shopDelData : this.addShopData;
      if( !obj.email ){
        return false;
      } else if(!reg.test(obj.email)){
         this.$message( this.$t('hint.EmailFormatIncorrect') );
        //  obj.email = undefined;
       }
    },
    emptyText(){
      $('#shopNamePlace')[0].placeholder = '';
    },
    //修改店铺检验店铺名称是否重复
    checkModifyShopName(){
      checkShopName(this.shopDelData.shopName,this.$route.query.id,this.shopDelData.shopId).then(res=>{
        if(res.code === 40002037 ){
          this.$message( this.$t('hint.ShopNameAlreadyExists') );
        } else {
          return false;
        }
      })
    },
    //新增店铺检验店铺名称是否重复
    checkShopName(){
      if( this.addShopData.shopName === '' || this.addShopData.shopName === undefined){
        $('#shopNamePlace')[0].placeholder = this.$t('modifyShop.ShopName');
      } else {
        checkShopName(this.addShopData.shopName,this.$route.query.id).then(res=>{
          if(res.code === 40002037 ){
            this.$message( this.$t('hint.ShopNameAlreadyExists') );
          } else {
            return false;
          }
        })
       }
    },
    // 切换新增店铺上传图片
    toggleAddShopImgUpload(){
      this.addShop_eluploadImg = !this.addShop_eluploadImg;
      this.isFiveImg = true;
    },
    // 新增店铺照片
    newShopPhotosSuccess(res) {
      const that = this;
      for (let i = this.counts.length; i >= 0; i--) {
        if (this.addShopData[this.counts[i]] === undefined) {
          this.count = i;
        }
      }
      if (this.count === 0) {
        this.addShopData.storePhotosUrl = res.value;
        const liObj = $("<li>").attr("id", "liID");
        const imgObj = $("<img>").attr("src", this.addShopData.storePhotosUrl);
        const iObj = $("<i>").attr('class','delShopImg').attr('id','delI');
        const i_img = $("<img>").attr("src", deleteImg);
        $("#addShopImgList_lastLi").before(liObj.append(imgObj));
        iObj.append(i_img).appendTo('#liID');
        this.addShop_showImg = false;
        this.upload_showImg = this.addShopData.storePhotosUrl;
        // $('#addShop_firstImg').append(firstImg);
        $("#delI").click(function() {
          that.$set(that.addShopData, "storePhotosUrl", undefined);
          liObj.remove();
          this.count = 0;
          that.isFiveImg = true;
          if( $("#addShopImgList").children().length === 1 ){
            that.addShop_showImg = true;
          } else {
            that.upload_showImg = $('#addShopImgList li').first()[0].children[0].src;
          }
          // for (let i = 1; i <= that.counts.length; i++) {
          //   if (that.addShopData[that.counts[i]] !== undefined) {
          //     that.upload_showImg = that.addShopData[that.counts[i]];
          //     return;
          //   } else {
          //     that.upload_showImg = '';
          //     that.addShop_showImg = true;
          //   }
          // }
        });
      } else if (this.count === 1) {
        this.addShopData.storePhotosUrl1 = res.value;
        const liObj = $("<li>").attr("id", "liID" + this.count);
        const imgObj = $("<img>").attr("src", this.addShopData.storePhotosUrl1);
        const iObj = $("<i>").attr('class','delShopImg').attr('id','delI'+this.count);
        const i_img = $("<img>").attr("src", deleteImg);
        $("#addShopImgList_lastLi").before(liObj.append(imgObj));
        iObj.append(i_img).appendTo('#liID1');
        this.upload_showImg = this.addShopData.storePhotosUrl1;
        $("#delI1").click(function() {
          that.$set(that.addShopData, "storePhotosUrl1", undefined);
          this.count = 1;
          that.isFiveImg = true;
          liObj.remove();
          if( $("#addShopImgList").children().length === 1 ){
            that.addShop_showImg = true;
          } else {
            that.upload_showImg = $('#addShopImgList li').first()[0].children[0].src;
          }
          // if(that.addShopData.storePhotosUrl === undefined){
          //   for (let i = 0; i <= that.counts.length; i++) {
          //     if (that.addShopData[that.counts[i]] !== undefined) {
          //       that.upload_showImg = that.addShopData[that.counts[i]];
          //       return;
          //     } else {
          //       that.upload_showImg = '';
          //       that.addShop_showImg = true;
          //     }
          //   }
          // }else{
          //   return;
          // }
        });
      } else if (this.count === 2) {
        this.addShopData.storePhotosUrl2 = res.value;
        const liObj = $("<li>").attr("id", "liID" + this.count);
        const imgObj = $("<img>").attr("src", this.addShopData.storePhotosUrl2);
        const iObj = $("<i>").attr('class','delShopImg').attr('id','delI'+this.count);
        const i_img = $("<img>").attr("src", deleteImg);
        $("#addShopImgList_lastLi").before(liObj.append(imgObj));
        iObj.append(i_img).appendTo('#liID2');
        this.upload_showImg = this.addShopData.storePhotosUrl2;
        $("#delI2").click(function() {
          that.$set(that.addShopData, "storePhotosUrl2", undefined);
          liObj.remove();
          this.count = 2;
          that.isFiveImg = true;
          if( $("#addShopImgList").children().length === 1 ){
            that.addShop_showImg = true;
          } else {
            that.upload_showImg = $('#addShopImgList li').first()[0].children[0].src;
          }
        });
      } else if (this.count === 3) {
        this.addShopData.storePhotosUrl3 = res.value;
        const liObj = $("<li>").attr("id", "liID" + this.count);
        const imgObj = $("<img>").attr("src", this.addShopData.storePhotosUrl3);
        const iObj = $("<i>").attr('class','delShopImg').attr('id','delI'+this.count);
        const i_img = $("<img>").attr("src", deleteImg);
        $("#addShopImgList_lastLi").before(liObj.append(imgObj));
        iObj.append(i_img).appendTo('#liID3');
        this.upload_showImg = this.addShopData.storePhotosUrl3;
        $("#delI3").click(function() {
          that.$set(that.addShopData, "storePhotosUrl3", undefined);
          liObj.remove();
          this.count = 3;
          that.isFiveImg = true;
          if($('#addShopImgList li').last()[0].children[0].id === 'addShopImgList_lastLi'){
            that.upload_showImg = undefined;
            that.addShop_showImg = true;
          } else {
            that.upload_showImg = $('#addShopImgList li').first()[0].children[0].src;
          }
        });
      } else if (this.count === 4) {
        this.addShopData.storePhotosUrl4 = res.value;
        const liObj = $("<li>").attr("id", "liID" + this.count);
        const imgObj = $("<img>").attr("src", this.addShopData.storePhotosUrl4);
        const iObj = $("<i>").attr('class','delShopImg').attr('id','delI'+this.count);
        const i_img = $("<img>").attr("src", deleteImg);
        $("#addShopImgList_lastLi").before(liObj.append(imgObj));
        iObj.append(i_img).appendTo('#liID4');
        this.upload_showImg = this.addShopData.storePhotosUrl4;
        $("#delI4").click(function() {
          that.$set(that.addShopData, "storePhotosUrl4", undefined);
          liObj.remove();
          this.count = 4;
          that.isFiveImg = true;
          if( $("#addShopImgList").children().length === 1 ){
            that.addShop_showImg = true;
          } else {
            that.upload_showImg = $('#addShopImgList li').first()[0].children[0].src;
          }
        });
      }
      this.isFiveImg = $('#addShopImgList').children().length === 6 ? false : true;
      // if (
      //   this.addShopData.storePhotosUrl &&
      //   this.addShopData.storePhotosUrl1 &&
      //   this.addShopData.storePhotosUrl2 &&
      //   this.addShopData.storePhotosUrl3 &&
      //   this.addShopData.storePhotosUrl4
      // ) {
      //   this.isFiveImg = false;
      // }
    },
    // 显示新增店铺对话框
    commitAddShop(num) {
      const reg = /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/; 
      if( !reg.test(this.addShopData.email) && this.addShopData.email ){
        this.$message( this.$t('hint.EmailFormatIncorrect') );
        return;
      } else {
        const _that = this;
        [...this.requiredArr] = this.companyId === "2" ? this.AuShopRequiredArr : this.HKShopRequiredArr;
        const obj = num === 1 ? this.shopDelData : this.addShopData;
        for (let i = 0; i < this.requiredArr.length; i++) {
          if ( obj[this.requiredArr[i]] === "" || obj[this.requiredArr[i]] === null || obj[this.requiredArr[i]] === undefined ) {
            console.log(_that.requiredArr[i]);
            if( _that.requiredArr[i] === 'shopName' ) {
              _that.prer_html  =  _that.$t('shop.shopName');
              $(".addShop_form #shopNamePlace").addClass('border_red').focus();
            } else if( _that.requiredArr[i] === 'continent' ) {
              _that.prer_html  =  _that.$t('AuMer.State');
            } else if( _that.requiredArr[i] === 'email' ) {
              _that.prer_html  =  _that.$t('mec.Email');
            } else {
              this.prer_html = $('#'+_that.requiredArr[i] ).prev().prev().html();
            }
            if(localStorage.getItem('locale') === 'en' ){
              _that.prer_html = _that.prer_html.replace('*','').toLocaleLowerCase();
            } else {
              _that.prer_html = _that.prer_html.replace('*','');
            }
            $(".addShop_form #" + _that.requiredArr[i]).addClass('border_red').focus();
            this.$message( this.$t('hint.pleaseEnter') + this.prer_html );
            return false;
          }
        }
        if(obj.storePhotosUrl || obj.storePhotosUrl1 || obj.storePhotosUrl2 || obj.storePhotosUrl3 || obj.storePhotosUrl4 ){
          this.flag = true;
        } else {
          this.$message(this.$t("hint.PleaseAddMerchantOrShopPhoto"));
          return false;
        }
        $("#shopAddMsg").fadeIn(500);
      }
    },
    // 取消新增店铺对话框
    cancelAddShop() {
      $("#shopAddMsg").fadeOut(500);
    },
    // 取消新增店铺
    cancelAdd() {
      this.showAddShop = !this.showAddShop;
      this.showShopList = !this.showShopList;
      this.shopLayer = 0;
      this.addShopData = {};
      this.addShopData.continent = undefined;
      $('#liID').remove();
      $('#liID1').remove();
      $('#liID2').remove();
      $('#liID3').remove();
      $('#liID4').remove();
    },
    // 切换新增店铺
    toggleAddShop() {
      this.shopLayer = 2;
      this.showAddShop = !this.showAddShop;
      this.addShop_showImg = true;
      this.showShopList = !this.showShopList;
      $('#shopNamePlace')[0].placeholder = this.$t('modifyShop.ShopName');
       $('.border_red').removeClass('border_red');
      $('#liID').remove();
      $('#liID1').remove();
      $('#liID2').remove();
      $('#liID3').remove();
      $('#liID4').remove();
    },
    // 切换上传图片
    toggleUploadImg() {
      this.showUploadList = !this.showUploadList;
      this.isShopFiveImg = $('#uploadShopImgUl').children().length === 6 ? false : true;
      // if (this.shopImgList.length >= 4) {
      //   this.isShopFiveImg = false;
      // }
    },
    //删除照片
    delImg(key) {
      this.$set(this.shopDelData, key, undefined);
      this.isShopFiveImg = true;
      if($("#"+key).next()[0].children[0].id === "modifyShopElupload"){
        // this.modiFyShopFirstImg = this.shopDelData.storePhotosUrl4 && this.shopDelData.storePhotosUrl3 && this.shopDelData.storePhotosUrl2 && this.shopDelData.storePhotosUrl1 && this.shopDelData.storePhotosUrl;
        this.modiFyShopFirstImg = this.shopDelData.storePhotosUrl || this.shopDelData.storePhotosUrl1 || this.shopDelData.storePhotosUrl2 || this.shopDelData.storePhotosUrl3 || this.shopDelData.storePhotosUrl4;
      } else {
        this.modiFyShopFirstImg = $("#"+key).next()[0].children[0].src;
      }
    },
    //修改店铺相片
    shopPhotosSuccess(res) {
      this.isShopFiveImg = $('#uploadShopImgUl').children().length === 5 ? false : true;
      // this.modiFyShopFirstImg = $("#"+key).next()[0].children[0].src;
      this.modiFyShopFirstImg = res.value;
      if (this.shopDelData.storePhotosUrl === undefined) {
        this.$set(this.shopDelData, "storePhotosUrl", res.value);
        return false;
      } else if (this.shopDelData.storePhotosUrl1 === undefined) {
        this.$set(this.shopDelData, "storePhotosUrl1", res.value);
        return false;
      } else if (this.shopDelData.storePhotosUrl2 === undefined) {
        this.$set(this.shopDelData, "storePhotosUrl2", res.value);
        return false;
      } else if (this.shopDelData.storePhotosUrl3 === undefined) {
        this.$set(this.shopDelData, "storePhotosUrl3", res.value);
        return false;
      } else if (this.shopDelData.storePhotosUrl4 === undefined) {
        this.$set(this.shopDelData, "storePhotosUrl4", res.value);
        return false;
      }
      // if (
      //   this.shopDelData.storePhotosUrl &&
      //   this.shopDelData.storePhotosUrl1 &&
      //   this.shopDelData.storePhotosUrl2 &&
      //   this.shopDelData.storePhotosUrl3 &&
      //   this.shopDelData.storePhotosUrl4
      // ) {
      //   this.isShopFiveImg = false;
      // }
    },
    // 提交店铺资料
    commitShopData(num) {
      const _that = this;
      
      if(this.flag){
        // console.log(333);
        // this.shopDelData.remarks = num;
        //  num =1 修改资料 num =0 新增 重新提交 = 0
        // this.addShopData.abbreviation = this.addShopData.shopName;
        this.addShopData.merchantId = this.$route.query.id;
        const data = num === 1 ? this.shopDelData : this.addShopData;
        const func = data.state === 3 && data.remarks === '0' ? reauditShop : addShopAjax;        
        data.remarks = num ;
        if (data.state === 3 && data.remarks === '0') data.remarks = 0;

        // console.log(data);//2.5
        // return;
        func(data).then(res => {
          if (res.code === 0 && num === 1) {
            this.showShopList = !this.showShopList;
            this.showShopDel = !this.showShopDel;
            this.modifyShop = !this.modifyShop;
            $("#shopMsg").fadeOut(500);
            this.shopLayer = 0;
            this.shopListAll(this.$route.query.id);
            this.flag = false;
          } else if (res.code === 0 && num === 0) {
            this.showShopList = !this.showShopList;
            this.showAddShop = !this.showAddShop;
            $("#shopAddMsg").fadeOut(500);
            this.shopLayer = 0;
            this.addShopData = {};
            this.shopListAll(this.$route.query.id);
            this.flag = false;
            // this.shopIndustry = '';
            this.$notify({
              title: this.$t("hint.Alert"),
              message: this.$t("hint.CreateOK"),
              type: "success",
              duration: 2000
            });
          } else if ( res.code !== 0 ){
            // this.$message( '店铺照片不能为空' );
            this.$notify({
              title: this.$t("hint.Alert"),
              message: this.$t("hint.CreateFailed"),
              type: "error",
              duration: 2000
            });
          }
        });
      }
    },
    // 提交店铺修改对话框
    commitModifyShop(num) {
      const _that = this;
      const reg = /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/; 
      if( !reg.test(this.shopDelData.email) && this.shopDelData.email ){
        this.$message( this.$t('hint.EmailFormatIncorrect') );
        return;
      } else {
        [...this.requiredArr] = this.companyId === "2" ? this.AuShopRequiredArr : this.HKShopRequiredArr;
        const obj = num === 1 ? this.shopDelData : this.addShopData;
        for (let i = 0; i < this.requiredArr.length; i++) {
          if ( obj[this.requiredArr[i]] === "" || obj[this.requiredArr[i]] === null || obj[this.requiredArr[i]] === undefined ) {
            if(_that.requiredArr[i] === 'shopName' ) {
              _that.prer_html  =  _that.$t('shop.shopName');
            } else if( _that.requiredArr[i] === 'continent' ) {
              _that.prer_html  =  _that.$t('AuMer.State');
            } else if( _that.requiredArr[i] === 'email' ) {
              _that.prer_html  =  _that.$t('mec.Email');
            }  else {
              this.prer_html = $('#'+_that.requiredArr[i] ).prev().prev().html();
            }

            if(localStorage.getItem('locale') === 'en' ){
              _that.prer_html = _that.prer_html.replace('*','').toLocaleLowerCase();
            } else {
              _that.prer_html = _that.prer_html.replace('*','');
            }
            $(".shopDelInfo #" + _that.requiredArr[i]).addClass('border_red').focus();
            this.$message( this.$t('hint.pleaseEnter') + this.prer_html );
            return false;
          }
        }
        if(obj.storePhotosUrl || obj.storePhotosUrl1 || obj.storePhotosUrl2 || obj.storePhotosUrl3 || obj.storePhotosUrl4 ){
          this.flag = true;
        } else {
          this.$message(this.$t("hint.PleaseAddMerchantOrShopPhoto"));
          return false;
        }
        $("#shopMsg").fadeIn(500);
      }
    },
    // 取消提交店铺修改对话框
    cancelMsgBox() {
      $("#shopMsg").fadeOut(500);
    },
    // 删除店铺
    delShop() {
      delShop(this.shopDelData.shopId).then(res => {
        if (res.code === 0) {
          this.showShopList = !this.showShopList;
          this.showShopDel = !this.showShopDel;
          $("#shopDel").fadeOut(500);
          this.shopLayer = 1;
          this.shopListAll(this.$route.query.id);
        }
      });
    },
    // 删除店铺对话框
    delShopBox() {
      $("#shopDel").fadeIn(500);
    },
    // 取消删除店铺对话框
    cancelDelBox() {
      $("#shopDel").fadeOut(500);
    },
    // 取消修改
    cancelModify() {
      this.shopDelData = $.extend(true, {}, this.extendShopData);
      this.getShopImgList(this.shopDelData);
      this.modifyShop = !this.modifyShop;
    },
    // 修改信息按钮
    modifyInfo() {
      this.extendShopData = $.extend(true, {}, this.shopDelData);
      this.modifyShop = !this.modifyShop;
      $('.border_red').removeClass('border_red');
      this.modiFyShopFirstImg = this.shopDelData.storePhotosUrl ||this.shopDelData.storePhotosUrl1 || this.shopDelData.storePhotosUrl2 || this.shopDelData.storePhotosUrl3 || this.shopDelData.storePhotosUrl4;
    },
    // 切换店铺
    tabToggle(num) {
      this.shopDelData = {};
      $('.border_red').removeClass('border_red');
      this.getShopImgList(this.shopDelData);
      this.shopIndex = this.shopIndex + num;
      if (this.shopListData.length - 1 < this.shopIndex) {
        this.shopIndex = 0;
        this.shopDelData = this.shopListData[this.shopIndex];
        this.getShopImgList(this.shopDelData);
        this.modiFyShopFirstImg = this.shopImgList[0].src;
      } else if (0 > this.shopIndex) {
        this.shopIndex = this.shopListData.length - 1;
        this.shopDelData = this.shopListData[this.shopIndex];
        this.getShopImgList(this.shopDelData);
        this.modiFyShopFirstImg = this.shopImgList[0].src;
      } else {
        this.shopDelData = this.shopListData[this.shopIndex];
        this.getShopImgList(this.shopDelData);
        this.modiFyShopFirstImg = this.shopImgList[0].src;
      }
      this.breadcrumb_shopName = this.shopDelData.shopName;
    },
    // 查看店铺详情
    getShop(shopInfoData, index) {
      this.shopDelData = shopInfoData;
      this.shopIndex = index;
      this.showShopList = !this.showShopList;
      this.showShopDel = !this.showShopDel;
      this.shopLayer = 1;
      this.breadcrumb_shopName = this.shopDelData.shopName;
      this.getShopImgList(this.shopDelData);
      $('.border_red').removeClass('border_red');
    },
    // 轮播图片 shopImgList
    getShopImgList(data) {
      this.shopImgList[0] = {};
      this.shopImgList[0].src = data.storePhotosUrl;
      this.shopImgList[1] = {};
      this.shopImgList[1].src = data.storePhotosUrl1;
      this.shopImgList[2] = {};
      this.shopImgList[2].src = data.storePhotosUrl2;
      this.shopImgList[3] = {};
      this.shopImgList[3].src = data.storePhotosUrl3;
      this.shopImgList[4] = {};
      this.shopImgList[4].src = data.storePhotosUrl4;
      this.shopImgList[0].id = 0;
      this.shopImgList[1].id = 1;
      this.shopImgList[2].id = 2;
      this.shopImgList[3].id = 3;
      this.shopImgList[4].id = 4;
      for (let i = this.shopImgList.length - 1; i >= 0; i--) {
        if (
          this.shopImgList[i].src === null ||
          this.shopImgList[i].src === undefined
        ) {
          this.shopImgList.splice(i, 1);
        }
      }
    },
    // 查询所有店铺
    shopListAll(id) {
      const _that = this;
      merchantShopTwo(id).then(res => {
        this.shopListData = res.value;
         // for(let i = 0;i<this.shopListData.length;i++){
         //    for(let j = 0;j<_that.AU_State_list.length;j++){
         //      if( _that.shopListData[i].continent === _that.AU_State_list[j].areaCode ){
         //        _that.shopListData[i].continent = _that.AU_State_list[j].areaCode;
         //        break;
         //      }
         //    }
         // }
      });
    },
    // 限制上传图片大小
    beforeImgUpload(file) {
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!isLt5M) {
        this.$message(this.$t("hint.ThePictureSizeMustNotExceed5M"));
      }
      return isLt5M;
    }
  }
};
</script>

<style lang="scss" scoped>
@media only screen and (max-width: 1919px) {
  // 店铺列表样式
  .shopListUl {
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin-top:30px;
    li {
      height: 306px;
      width: 236px;
      background-color: #fff;
      margin-bottom: 37px;
      margin-left: 42px;
      list-style: none;
      color: #666666;
      font-size: 12px;
      border-radius: 8px;
    }
    .shopListLi {
      overflow: hidden;
      .shopImg {
        width: 234px;
        height: 200px;
        position: relative;
        .maskBox {
          width: 100%;
          height: 100%;
          position: absolute;
          background: rgba(10, 10, 10, 0.7);
          display: flex;
          display: -webkit-flex;
          justify-content: center;
          align-items: center;
          span {
            color: #fff;
            font-size: 16px;
            font-weight: bold;
          }
        }
        .shopImgDel {
          width: 100%;
          height: 100%;
        }
      }
      .shopInfo {
        padding: 0 15px;
        background-color: #fff;
        h3 {
          margin: 8px  0; 
          // position:relative;
          span {
            font-size: 16px;
            color: #0a0a0a;
            max-width: 180px;;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            display: inline-block;
          }
          img{
            display:inline-block;
            width:20px;
            height:20px;
            // vertical-align: text-bottom;
            // position:absolute;
            // right:0;
          }
        }
        .shopAddress {
          height: 17px;
          line-height: 17px;
          margin-top: 5px;
          text-overflow:ellipsis;
          white-space: nowrap;
          width: 100%;
          overflow:hidden;
          i {
            display: inline-block;
            width: 12px;
            height: 14px;
            margin-right: 3px;
            img {
              width: 100%;
              height: 100%;
              vertical-align: top;
            }
          }
        }
        .shopContacts {
          height: 15px;
          line-height: 15px;
          margin: 5px 0;
          text-overflow:ellipsis;
          white-space: nowrap;
          width: 100%;
          overflow:hidden;
          i {
            display: inline-block;
            width: 10px;
            height: 12px;
            margin-right: 5px;
            img {
              width: 100%;
              height: 100%;
              vertical-align: top;
            }
          }
        }
        .shopPhone {
          display: -webkit-flex;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .phone {
            height: 16px;
            line-height: 16px;
            text-overflow:ellipsis;
            white-space: nowrap;
            overflow:hidden;
            width: 100px;
            i {
              display: inline-block;
              width: 12px;
              height: 12px;
              margin-right: 3px;
              img {
                width: 100%;
                height: 100%;
                vertical-align: text-top;
              }
            }
          }
          .getInfoShop {
            color: #4964cf;
            border-bottom: 1px solid;
            font-weight: bold;
          }
        }
      }
    }
    .shopListLi:hover{
      box-shadow: 0px 0px 34px rgba(134,134,134,0.4);
    }
    .newShop {
      display: -webkit-flex;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      border: 1px dashed #aaaaaa;
      border-radius: 8px;
      background: #f6f6f6 !important;
      div {
        width: 90px;
        height: 90px;
        margin-bottom: 22px;
        img {
          width: 100%;
          height: 100%;
          cursor: pointer;
        }
      }
    }
  }
  // 店铺详情样式
  .shopDel {
    width: 1010px;
    height: 410px;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    box-shadow: 0px 0px 34px rgba(191, 205, 255, 0.59);
    margin: 0 auto;
    position: relative;
    margin-top:50px;
    // 走马灯图片样式
    .swiper {
      .el-carousel__container{
        height:410px !important;
      }
      .el-carousel{
        height:410px !important;
      }
      width: 524px;
      height: 410px;
      list-style: none;
      overflow: hidden;
      margin: 0;
      padding: 0;
      position: relative;
      .carousel_item {
        width: 524px;
        height: 410px;
        border-top-left-radius:8px;
        border-bottom-left-radius:8px;
        img {
          display: inline-block;
          width: 100%;
          height: 100%;
        }
      }
      .toggleUpload {
        width: 524px;
        height: 410px;
        img {
          width: 100%;
          height: 100%;
        }
        i {
          width: 68px;
          height: 54px;
          display: inline-block;
          position: absolute;
          bottom: 15px;
          right: 20px;
          cursor: pointer;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    // 店铺详情具体数据 样式
    .shopDelInfo {
      position: relative;
      background-color: #fff;
      flex: 1;
      overflow: hidden;
      border-top-right-radius:8px;
      border-bottom-right-radius:8px;
      .show-div {
        width: 280px;
        height: 38px;
        line-height: 38px;
        color: #666;
        outline: none;
        box-sizing: border-box;
        text-overflow: ellipsis;
        white-space: nowrap;
        border: none!important;
        overflow: hidden;
      }
      .shopName {
        margin: 25px 0 25px 56px;
        font-size: 32px;
        height: 37px;
        width:  280px;
        color: #000;
        border: none;
        outline: none;
        border-bottom: 1px solid #333333;
        box-sizing: border-box;
        font-weight: bold;
        text-overflow:ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      .shopName:disabled {
        color: #000;
        border: none;
        background-color: #fff;
      }
      .shopName:hover {
        // text-overflow: clip;
      }.shopName:focus {
        // text-overflow: clip;
      }
      .modifyBtn {
        font-weight: bold;
        position: absolute;
        font-size: 18px;
        right: 10px;
        top: 10px;
        i {
          width: 20px;
          height: 20px;
          display: inline-block;
          img {
            height: 100%;
            width: 100%;
            vertical-align: middle;
          }
        }
      }
      .commitModify {
        position: absolute;
        right: 25px;
        top: 16px;
        font-size: 18px;
        a:first-child {
          color: #333333;
          font-weight: Regular;
        }
        a:last-child {
          font-weight: bold;
          color: #4964cf;
          margin-left: 20px;
        }
      }
      .shopDelUl-marginleft {
        margin: 6px 0 6px 56px!important;
        li {margin-bottom: 14px!important;}
      }
      .shopDelUl-margin {
        margin: 17px 0 17px 56px!important;
        li {margin-bottom: 20px!important;}
      }
      .shopDelUl {
        list-style: none;
        padding: 0;
        float: left;
        overflow: hidden;
        li {
          font-size: 20px;
          float: left;
          .shop-svg {
            float: left;
            width: 28px;
            height: 28px;
            margin: 4px 8px 4px 0;
          }
          span {
            float: left;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
            width: 90px;
            margin-right: 20px;
            height: 38px;
            line-height: 38px;
          }
          input {
            width: 280px;
            height: 38px;
            line-height: 38px;
            color: #666;
            border: none;
            outline: none;
            border-bottom: 1px solid #333;
            box-sizing: border-box;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          input:disabled {
            height: 38px;
            line-height: 38px;
            color: #666;
            border: none;
            background-color: #fff;
          }
        }
      }
      .shopMsgBox {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        display: none;
        .shopMsgLayer {
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: rgba($color: #000000, $alpha: 0.2);
          border-top-right-radius: 8px;
          border-bottom-right-radius: 8px;
        }
        .shopMsgInfo {
          position: absolute;
          left: 25%;
          top: 40%;
          width: 270px;
          height: 110px;
          background-color: #fff;
          display: flex;
          display: -webkit-flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          border-radius: 8px;
          .shopMsgInfo_header {
            color: rgba(82, 114, 233, 1);
            font-size: 12px;
            font-weight: bold;
            margin-top: 18px;
          }
          .shopMsgInfo_msg {
            color: rgba(0, 0, 0, 1);
            font-size: 10px;
            font-weight: Regular;
          }
          .shopMsgInfo_footer {
            font-weight: Regular;
            color: rgba(0, 0, 0, 1);
            font-size: 12px;
            width: 100%;
            display: flex;
            display: -webkit-flex;
            height: 30px;
            border-top: 1px solid #b5b5b5;
            button {
              width: 50%;
              border: none;
              background: #ffffff;
              outline: none;
            }
            .shopMsgInfo_footer_cancel {
              border-right: 1px solid #b5b5b5;
              border-bottom-left-radius: 8px;
            }
            .shopMsgInfo_footer_ok {
              color: rgba(82, 114, 233, 1);
              border-bottom-right-radius: 8px;
              font-weight: bold;
            }
          }
        }
      }
    }
    // 修改店铺上传图片
    .uploadImgList {
      position: relative;
      background-color: #fff;
      flex: 1;
      .upload_complete {
        position: absolute;
        top: 16px;
        right: 42px;
        font-size: 18px;
        font-weight: bold;
        a {
          color: rgba(73, 100, 207, 1);
        }
      }
      #uploadShopImgUl {
        list-style: none;
        display: flex;
        display: -webkit-flex;
        flex-wrap: wrap;
        margin-top: 60px;
        padding-left: 30px;
        li {
          margin-left: 18px;
          margin-bottom: 18px;
          width: 122px;
          height: 150px;
          border-radius: 8px;
          box-shadow: 0px 0px 24px rgba(191, 205, 255, 0.59);
          position: relative;
          img {
            width: 100%;
            height: 100%;
          }
          .delShopImg {
            display: inline-block;
            width: 18px;
            height: 20px;
            cursor: pointer;
            position: absolute;
            top: 6px;
            right: 6px;
            img {
              position: absolute;
              top: -6px;
              right: -6px;
              display: none;
              width: 100%;
              height: 100%;
            }
          }
        }
        li:hover {
          img {
            top: 6px;
            right: 6px;
            display: inline-block;
          }
        }
        li:last-child {
          position: relative;
          #modifyShopElupload {
            width: 122px;
            height: 150px;
            border: 1px dashed #666666;
            text-align: center;
            .el-icon-plus:before {
              content: "";
              background: url("./../../..//assets/imgs/elUpload.png") no-repeat;
              background-size: 100%;
              width: 100%;
              display: inline-block;
              height: 100%;
            }
          }
          .uploadSpan {
            display: inline-block;
            color: #333;
            font-size: 12px;
            position: absolute;
            left: 50%;
            bottom: 25px;
            transform: translateX(-50%);
          }
        }
      }
    }
    // 切换店铺样式
    .ShopToggle {
      position: absolute;
      bottom: -80px;
      right: 0;
      a {
        width: 60px;
        height: 60px;
        display: inline-block;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .toggle_right {
        margin-left: 20px;
      }
    }
    // 删除店铺样式
    .shop_delete {
      font-size: 12px;
      position: absolute;
      left: 0;
      bottom: -25px;
      .deleteBtn {
        color: rgba(102, 102, 102, 1);
      }
    }
  }
  // 新增店铺样式
  .addShop {
    width: 1010px;
    height: 410px;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    box-shadow: 0px 0px 34px rgba(191, 205, 255, 0.59);
    margin: 0 auto;
    position: relative;
    margin-top:50px;
    // 切换上传图片
    .addShop_toggleUpload {
      width: 524px;
      height: 410px;
      display: flex;
      display: -webkit-flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #5272e9;
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
      .addShop_imgBox {
        cursor: pointer;
        width: 114px;
        height: 92px;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        margin-bottom: 18px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      span {
        color: #fff;
        font-weight: Regular;
      }
    }
    //第一张图片
    #addShop_firstImg{
      width: 524px;
      height: 410px;
      img{
        width:100%;
        height:100%;
      }
    }
    // 新增店铺资料
    .addShop_form {
      flex: 1;
      background-color: #fff;
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
      position: relative;
      .commitAdd {
        position: absolute;
        right: 25px;
        top: 16px;
        font-size: 18px;
        a:first-child {
          color: #333333;
          font-weight: Regular;
        }
        a:last-child {
          font-weight: bold;
          color: #4964cf;
          margin-left: 20px;
        }
      }
      .addShop_shopName {
        margin: 25px 0 25px 56px;
        font-size: 32px;
        input {
          height: 37px;
          width: 280px;
          border: none;
          outline: none;
          border-bottom: 1px solid #333333;
          font-weight: bold;
          margin-top: 10px;
        }
        input:focus{
          border-color: #333;
        }
        input::-webkit-input-placeholder {
          color: #0a0a0a;
          font-weight: bold;
        }
        input::-moz-placeholder {
          /* Mozilla Firefox 19+ */
          color: #0a0a0a;
          font-weight: bold;
        }
        input:-moz-placeholder {
          /* Mozilla Firefox 4 to 18 */
          color: #0a0a0a;
          font-weight: bold;
        }
        input:-ms-input-placeholder {
          /* Internet Explorer 10-11 */
          color: #0a0a0a;
          font-weight: bold;
        }
      } 
      .shopDelUl-marginleft {
        margin: 6px 0 6px 56px!important;
        li {margin-bottom: 14px!important;}
      }
      .shopDelUl-margin {
        margin: 26px 0 26px 56px!important;
        li {margin-bottom: 20px!important;}
      }
      .addShop_ul {
        list-style: none;
        padding: 0;
        margin-left: 56px;
        margin-top: 40px;
        float: left;
        overflow: hidden;
        li {
          margin-bottom: 28px;
          font-size: 20px;
          height: 38px;
          line-height: 38px;
          float: left;
          .shop-svg {
            float: left;
            width: 28px;
            height: 28px;
            margin: 4px 8px 4px 0;
          }
          span {
            float: left;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
            width: 80px;
            margin-right: 20px;
            height: 38px;
            line-height: 38px;
          }
          input {
            width: 280px;
            height: 38px;
            line-height: 38px;
            color: #666;
            border: none;
            outline: none;
            border-bottom: 1px solid #333;
            box-sizing: border-box;
            text-overflow: ellipsis;
            white-space: nowrap;
            float: left;
          }
          input:disabled {
            height: 38px;
            line-height: 38px;
            color: #666;
            border: none;
            background-color: #fff;
          }
        }
      }
      .shopMsgBox {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        display: none;
        .shopMsgLayer {
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: rgba($color: #000000, $alpha: 0.2);
          border-top-right-radius: 8px;
          border-bottom-right-radius: 8px;
        }
        .shopMsgInfo {
          position: absolute;
          left: 25%;
          top: 40%;
          width: 270px;
          height: 110px;
          background-color: #fff;
          display: flex;
          display: -webkit-flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          border-radius: 8px;
          .shopMsgInfo_header {
            color: rgba(82, 114, 233, 1);
            font-size: 12px;
            font-weight: bold;
            margin-top: 18px;
          }
          .shopMsgInfo_msg {
            color: rgba(0, 0, 0, 1);
            font-size: 10px;
            font-weight: Regular;
          }
          .shopMsgInfo_footer {
            font-weight: Regular;
            color: rgba(0, 0, 0, 1);
            font-size: 12px;
            width: 100%;
            display: flex;
            display: -webkit-flex;
            height: 30px;
            border-top: 1px solid #b5b5b5;
            button {
              width: 50%;
              border: none;
              background: #ffffff;
              outline: none;
            }
            .shopMsgInfo_footer_cancel {
              border-right: 1px solid #b5b5b5;
              border-bottom-left-radius: 8px;
            }
            .shopMsgInfo_footer_ok {
              color: rgba(82, 114, 233, 1);
              border-bottom-right-radius: 8px;
              font-weight: bold;
            }
          }
        }
      }
    }
    // 新增店铺上传图片
    .addShop_imgUpload {
      position: relative;
      background-color: #fff;
      flex: 1;
      .upload_complete {
        position: absolute;
        top: 16px;
        right: 42px;
        font-size: 18px;
        font-weight: bold;
        a {
          color: rgba(73, 100, 207, 1);
        }
      }
    }
    // 上传图片列表
    #addShopImgList {
        list-style: none;
        display: flex;
        display: -webkit-flex;
        flex-wrap: wrap;
        margin-top: 60px;
        padding-left: 30px;
        li {
          margin-left: 18px;
          margin-bottom: 18px;
          width: 122px;
          height: 150px;
          border-radius: 8px;
          box-shadow: 0px 0px 24px rgba(191, 205, 255, 0.59);
          position: relative;
          img {
            width: 100%;
            height: 100%;
          }
          .delShopImg {
            display: inline-block;
            width: 18px;
            height: 20px;
            cursor: pointer;
            position: absolute;
            top: 6px;
            right: 6px;
            img {
              position: absolute;
              top: -6px;
              right: -6px;
              display: none;
              width: 100%;
              height: 100%;
            }
          }
        }
        li:hover {
          img {
            top: 6px;
            right: 6px;
            display: inline-block;
          }
        }
        .addShop_lastLi {
          #addShopElupload {
            width: 122px;
            height: 150px;
            border: 1px dashed #666666;
            text-align: center;
            .el-icon-plus:before {
              content: "";
              background: url("./../../..//assets/imgs/elUpload.png") no-repeat;
              background-size: 100%;
              width: 100%;
              display: inline-block;
              height: 100%;
            }
          }
          .uploadSpan {
            display: inline-block;
            color: #333;
            font-size: 12px;
            position: absolute;
            left: 50%;
            bottom: 25px;
            transform: translateX(-50%);
          }
        }
      }
  }
  #addShop_firstImg{
    position: relative;
    i {
      width: 68px;
      height: 54px;
      display: inline-block;
      position: absolute;
      bottom: 15px;
      right: 20px;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

@media only screen and (min-width: 1920px) {
  // 店铺列表样式
  .shopListUl {
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin-top:80px;
    li {
      height: 430px;
      width: 330px;
      background-color: #fff;
      margin-bottom: 52px;
      margin-left: 60px;
      list-style: none;
      color: #666666;
      font-size: 16px;
      border-radius: 8px;
    }
    .shopListLi {
      // box-shadow: 0px 0px 34px rgba(134,134,134,0.4);
      .shopImg {
        width: 330px;
        height: 286px;
        position: relative;
        .maskBox {
          width: 100%;
          height: 100%;
          position: absolute;
          background: rgba(10, 10, 10, 0.7);
          display: flex;
          display: -webkit-flex;
          justify-content: center;
          align-items: center;
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;
          span {
            color: #fff;
            font-size: 22px;
            font-weight: bold;
          }
        }
        .shopImgDel {
          width: 100%;
          height: 100%;
          border-top-left-radius:8px;
          border-top-right-radius:8px;
        }
      }
      .shopInfo {
        padding: 0 20px;
        background-color: #fff;
        h3 {
          margin: 8px 0; 
          // position:relative;
          span {
            font-size: 22px;
            color: #0a0a0a;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            max-width:255px;
            display: inline-block;
          }
          img{
            display:inline-block;
            width:28px;
            height:28px;
            // position:absolute;
            // right:0;
          }
        }
        .shopAddress {
          height: 24px;
          line-height: 24px;
          margin-top: 8px;
          text-overflow:ellipsis;
          white-space: nowrap;
          width: 100%;
          overflow:hidden;
          i {
            display: inline-block;
            width: 16px;
            height: 20px;
            margin-right: 4px;
            img {
              width: 100%;
              height: 100%;
              vertical-align: top;
            }
          }
        }
        .shopContacts {
          height: 20px;
          line-height: 20px;
          margin: 8px 0;
          text-overflow:ellipsis;
          white-space: nowrap;
          width: 100%;
          overflow:hidden;
          i {
            display: inline-block;
            width: 16px;
            height: 18px;
            margin-right: 4px;
            img {
              width: 100%;
              height: 100%;
              vertical-align: top;
            }
          }
        }
        .shopPhone {
          display: -webkit-flex;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .phone {
            height: 22px;
            line-height: 22px;
            text-overflow:ellipsis;
            white-space: nowrap;
            overflow:hidden;
            width: 170px;
            i {
              display: inline-block;
              width: 16px;
              height: 16px;
              margin-right: 5px;
              img {
                width: 100%;
                height: 100%;
                vertical-align: text-top;
              }
            }
          }
          .getInfoShop {
            color: #4964cf;
            border-bottom: 1px solid;
            font-weight: bold;
          }
        }
      }
    }
    .shopListLi:hover{
      box-shadow: 0px 0px 34px rgba(134,134,134,0.4);
    }
    .newShop {
      display: -webkit-flex;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      border: 1px dashed #aaaaaa;
      border-radius: 8px;
      background: #f6f6f6 !important;
      div {
        width: 126px;
        height: 126px;
        margin-bottom: 30px;
        img {
          width: 100%;
          height: 100%;
          cursor: pointer;
        }
      }
    }
  }
  // 店铺详情样式
  .shopDel {
    width: 1422px;
    height: 576px;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    box-shadow: 0px 0px 34px rgba(191, 205, 255, 0.59);
    margin: 0 auto;
    position: relative;
    margin-top:90px;
    // 走马灯图片样式
    .swiper {
      .el-carousel__container{
        height:577px !important;
        .el-carousel__arrow{
          top:90% !important;
        }
      }
      .el-carousel{
        height:577px !important;
      }
      
      width: 738px;
      height: 576px;
      list-style: none;
      overflow: hidden;
      margin: 0;
      padding: 0;
      position: relative;
      .carousel_item {
        width: 738px;
        height: 576px;
        border-top-left-radius:8px;
        border-bottom-left-radius:8px;
        img {
          display: inline-block;
          width: 100%;
          height: 100%;
        }
      }
      .toggleUpload {
        width: 738px;
        height: 576px;
        img {
          width: 100%;
          height: 100%;
        }
        i {
          width: 96px;
          height: 76px;
          display: inline-block;
          position: absolute;
          bottom: 20px;
          right: 28px;
          cursor: pointer;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    // 店铺详情具体数据 样式
    .shopDelInfo {
      position: relative;
      background-color: #fff;
      flex: 1;
      border-top-right-radius:8px;
      border-bottom-right-radius:8px;
      .show-div {
        width: 394px;
        height: 42px;
        line-height: 42px;
        color: #666;
        outline: none;
        box-sizing: border-box;
        text-overflow: ellipsis;
        white-space: nowrap;
        border: none!important;
        overflow: hidden;
      }
      .shopName {
        margin: 35px 0 35px 78px;
        font-size: 44px;
        height: 52px;
        line-height: 52px;
        width: 394px;
        color: #000;
        border: none;
        outline: none;
        border-bottom: 1px solid #333333;
        box-sizing: border-box;
        // text-overflow:ellipsis;
        // white-space: nowrap;
      }
      .shopName:disabled {
        border: none;
        background-color: #fff;
      }
      .shopName:hover {
        // text-overflow: clip;
      }
      .shopName:focus {
        // text-overflow: clip;
      }
      .modifyBtn {
        font-weight: bold;
        position: absolute;
        font-size: 24px;
        right: 14px;
        top: 14px;
        i {
          width: 30px;
          height: 30px;
          display: inline-block;
          img {
            height: 100%;
            width: 100%;
            vertical-align: middle;
          }
        }
      }
      .commitModify {
        position: absolute;
        right: 35px;
        top: 22px;
        font-size: 24px;
        a:first-child {
          color: #333333;
          font-weight: Regular;
        }
        a:last-child {
          font-weight: bold;
          color: #4964cf;
          margin-left: 28px;
        }
      }
      .shopDelUl {
        list-style: none;
        padding: 0;
        // margin-left: 78px;
        margin: 0 0 0 56px;
        float: left;
        overflow: hidden;
        li {
          margin-bottom: 30px;
          font-size: 28px;
          float: left;
          .shop-svg {
            float: left;
            width: 34px;
            height: 34px;
            margin: 4px 16px 4px 0;
          }
          span{
            float: left;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
            width: 120px;
            margin-right: 20px;
            height: 42px;
            line-height: 42px;
          }
          input {
            width: 394px;
            height: 42px;
            color: #666666;
            border: none;
            outline: none;
            border-bottom: 1px solid #333333;
            box-sizing: border-box;
          }
          input:disabled {
            height: 42px;
            color: #666666;
            border: none;
            background-color: #fff;
            // text-overflow: ellipsis;
            // white-space: nowrap;
          }
        }
      }
      .shopMsgBox {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        display: none;
        .shopMsgLayer {
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: rgba($color: #000000, $alpha: 0.2);
          border-top-right-radius: 8px;
          border-bottom-right-radius: 8px;
        }
        .shopMsgInfo {
          position: absolute;
          left: 25%;
          top: 40%;
          width: 380px;
          height: 154px;
          background-color: #fff;
          display: flex;
          display: -webkit-flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          border-radius: 8px;
          .shopMsgInfo_header {
            color: rgba(82, 114, 233, 1);
            font-size: 16px;
            font-weight: bold;
            margin-top: 24px;
          }
          .shopMsgInfo_msg {
            color: rgba(0, 0, 0, 1);
            font-size: 14px;
            font-weight: Regular;
          }
          .shopMsgInfo_footer {
            font-weight: Regular;
            color: rgba(0, 0, 0, 1);
            font-size: 16px;
            width: 100%;
            display: flex;
            display: -webkit-flex;
            height: 42px;
            border-top: 1px solid #b5b5b5;
            button {
              width: 50%;
              border: none;
              background: #ffffff;
              outline: none;
            }
            .shopMsgInfo_footer_cancel {
              border-right: 1px solid #b5b5b5;
              border-bottom-left-radius: 8px;
            }
            .shopMsgInfo_footer_ok {
              color: rgba(82, 114, 233, 1);
              border-bottom-right-radius: 8px;
              font-weight: bold;
            }
          }
        }
      }
    }
    // 修改店铺上传图片
    .uploadImgList {
      position: relative;
      background-color: #fff;
      flex: 1;
      .upload_complete {
        position: absolute;
        top: 22px;
        right: 60px;
        font-size: 24px;
        font-weight: bold;
        a {
          color: rgba(73, 100, 207, 1);
        }
      }
      #uploadShopImgUl {
        list-style: none;
        display: flex;
        display: -webkit-flex;
        flex-wrap: wrap;
        margin-top: 84px;
        padding-left: 42px;
        li {
          margin-left: 24px;
          margin-bottom: 24px;
          width: 170px;
          height: 210px;
          border-radius: 8px;
          box-shadow: 0px 0px 34px rgba(191, 205, 255, 0.59);
          position: relative;
          img {
            width: 100%;
            height: 100%;
          }
          .delShopImg {
            display: inline-block;
            width: 24px;
            height: 28px;
            cursor: pointer;
            position: absolute;
            top: 8px;
            right: 8px;
            img {
              position: absolute;
              top: -8px;
              right: -8px;
              display: none;
              width: 100%;
              height: 100%;
            }
          }
        }
        li:hover {
          img {
            top: 8px;
            right: 8px;
            display: inline-block;
          }
        }
        li:last-child {
          position: relative;
          #modifyShopElupload {
            width: 172px;
            height: 210px;
            border: 1px dashed #666666;
            text-align: center;
            .el-icon-plus:before {
              content: "";
              background: url("./../../..//assets/imgs/elUpload.png") no-repeat;
              background-size: 100%;
              width: 100%;
              display: inline-block;
              height: 100%;
            }
          }
          .uploadSpan {
            display: inline-block;
            color: #333;
            font-size: 16px;
            position: absolute;
            // left: 50px;
            // bottom: 35px;
            left: 50%;
             bottom: 35px;
            transform: translateX(-50%);
          }
        }
      }
    }
    // 切换店铺样式
    .ShopToggle {
      position: absolute;
      bottom: -112px;
      right: 0;
      a {
        width: 84px;
        height: 84px;
        display: inline-block;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .toggle_right {
        margin-left: 28px;
      }
    }
    // 删除店铺样式
    .shop_delete {
      font-size: 16px;
      position: absolute;
      left: 0;
      bottom: -30px;
      .deleteBtn {
        color: rgba(102, 102, 102, 1);
      }
    }
  }
  // 新增店铺样式
  .addShop {
    width: 1422px;
    height: 576px;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    box-shadow: 0px 0px 34px rgba(191, 205, 255, 0.59);
    margin: 0 auto;
    position: relative;
    margin-top:70px;
    // 切换上传图片
    .addShop_toggleUpload {
      width: 738px;
      height: 576px;
      display: flex;
      display: -webkit-flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #5272e9;
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
      .addShop_imgBox {
        cursor: pointer;
        width: 160px;
        height: 130px;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        margin-bottom: 18px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      span {
        color: #fff;
        font-weight: Regular;
      }
    }
    //第一张图片
    #addShop_firstImg{
      width: 738px;
      height: 578px;
      img{
        width:100%;
        height:100%;
      }
    }
    // 新增店铺资料
    .addShop_form {
      flex: 1;
      background-color: #fff;
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
      position: relative;
      .commitAdd {
        position: absolute;
        right: 35px;
        top: 22px;
        font-size: 24px;
        a:first-child {
          color: #333333;
          font-weight: Regular;
        }
        a:last-child {
          font-weight: bold;
          color: #4964cf;
          margin-left: 28px;
        }
      }
      .addShop_shopName {
        margin: 35px 0 35px 78px;
        font-size: 32px;
        input {
          height: 52px;
          width: 394px;
          border: none;
          outline: none;
          border-bottom: 1px solid #333333;
          font-weight: bold;
          margin-top: 18px;
        }
        input:focus{
          // border-color: #333 !important;
        }
        input::-webkit-input-placeholder {
          color: #0a0a0a;
          font-weight: bold;
        }
        input::-moz-placeholder {
          /* Mozilla Firefox 19+ */
          color: #0a0a0a;
          font-weight: bold;
        }
        input:-moz-placeholder {
          /* Mozilla Firefox 4 to 18 */
          color: #0a0a0a;
          font-weight: bold;
        }
        input:-ms-input-placeholder {
          /* Internet Explorer 10-11 */
          color: #0a0a0a;
          font-weight: bold;
        }
      }
      .addShop_ul {
        list-style: none;
        padding: 0;
        margin-left:78px;
        margin-top: 84px;
        li {
          margin-bottom: 40px;
          font-size: 28px;
          height: 42px;
          line-height: 42px;
          float: left;
          .shop-svg {
            float: left;
            width: 34px;
            height: 34px;
            margin: 4px 16px 4px 0;
          }
          span {
            display: inline-block;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
            width: 120px;
            margin-right: 28px;
            float: left;
          }
          .addShop_inputBox {
            display: inline-block;
          }
          input {
            width: 394px;
            height: 42px;
            line-height: 42px;
            color: #666666;
            border: none;
            outline: none;
            border-bottom: 1px solid #333333;
            box-sizing: border-box;
            padding: 0;
            float: left;
          }
        }
      }
      .shopMsgBox {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        display: none;
        .shopMsgLayer {
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: rgba($color: #000000, $alpha: 0.2);
          border-top-right-radius: 8px;
          border-bottom-right-radius: 8px;
        }
        .shopMsgInfo {
          position: absolute;
          left: 25%;
          top: 40%;
          width: 380px;
          height: 154px;
          background-color: #fff;
          display: flex;
          display: -webkit-flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          border-radius: 8px;
          .shopMsgInfo_header {
            color: rgba(82, 114, 233, 1);
            font-size: 16px;
            font-weight: bold;
            margin-top: 24px;
          }
          .shopMsgInfo_msg {
            color: rgba(0, 0, 0, 1);
            font-size: 14px;
            font-weight: Regular;
          }
          .shopMsgInfo_footer {
            font-weight: Regular;
            color: rgba(0, 0, 0, 1);
            font-size: 19px;
            width: 100%;
            display: flex;
            display: -webkit-flex;
            height: 42px;
            border-top: 1px solid #b5b5b5;
            button {
              width: 50%;
              border: none;
              background: #ffffff;
              outline: none;
            }
            .shopMsgInfo_footer_cancel {
              border-right: 1px solid #b5b5b5;
              border-bottom-left-radius: 8px;
            }
            .shopMsgInfo_footer_ok {
              color: rgba(82, 114, 233, 1);
              border-bottom-right-radius: 8px;
              font-weight: bold;
            }
          }
        }
      }
    }
    // 新增店铺上传图片
    .addShop_imgUpload {
      position: relative;
      background-color: #fff;
      flex: 1;
      .upload_complete {
        position: absolute;
        top: 22px;
        right: 60px;
        font-size: 24px;
        font-weight: bold;
        a {
          color: rgba(73, 100, 207, 1);
        }
      }
    }
    // 上传图片列表
    #addShopImgList {
        list-style: none;
        display: flex;
        display: -webkit-flex;
        flex-wrap: wrap;
        margin-top: 84px;
        padding-left: 42px;
        li {
          margin-left: 24px;
          margin-bottom: 24px;
          width: 172px;
          height: 210px;
          border-radius: 8px;
          box-shadow: 0px 0px 24px rgba(191, 205, 255, 0.59);
          position: relative;
          img {
            width: 100%;
            height: 100%;
          }
          .delShopImg {
            display: inline-block;
            width: 24px;
            height: 28px;
            cursor: pointer;
            position: absolute;
            top: 8px;
            right: 8px;
            img {
              position: absolute;
              top: -8px;
              right: -8px;
              display: none;
              width: 100%;
              height: 100%;
            }
          }
        }
        li:hover {
          img {
            top: 8px;
            right: 8px;
            display: inline-block;
          }
        }
        .addShop_lastLi {
          width: 122px;
          height: 150px;
          #addShopElupload {
            width: 122px;
            height: 150px;
            border: 1px dashed #666666;
            text-align: center;
            .el-icon-plus:before {
              content: "";
              background: url("./../../..//assets/imgs/elUpload.png") no-repeat;
              background-size: 100%;
              width: 100%;
              display: inline-block;
              height: 100%;
            }
          }
          .uploadSpan {
            display: inline-block;
            color: #333;
            font-size: 12px;
            position: absolute;
            left: 50%;
            bottom: 25px;
            transform: translateX(-50%);
          }
        }
      }
  }
  #addShop_firstImg{
    position: relative;
    i {
      width: 96px;
      height: 76px;
      display: inline-block;
      position: absolute;
      bottom: 21px;
      right: 28px;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>